<template>
  <div class="heat-container">
    <div class="search_content">
      <div class="top_title">
        <div class="top_title_back" @click="$router.go(-1)"><i class="iconfont icon-back"></i></div>
        <div class="top_title_val">
          {{ $route.meta.title }}
        </div>
        <div class="top_title_right">

        </div>
      </div>
    </div>
    <div ref="searchRef" class="search">
      <div>
        <div class="time-ctn">
          <span class="label">外服时间</span>
          <div class="range-ctn">
            <custom-input :input-value="requestParams.dateStart" @input-click="handleSelectTime('dateStart')" />
            至
            <custom-input :input-value="requestParams.dateEnd" @input-click="handleSelectTime('dateEnd')" />
          </div>

        </div>
        <div class="time-ctn">
          <span class="label">品牌</span>
          <div class="range-ctn">
            <custom-input :input-value="requestParams.brandName" @input-click="handleSelect('brandId', 'brandName')" />
          </div>

        </div>
        <div class="time-ctn">
          <span class="label">人员</span>
          <div class="range-ctn">
            <custom-input :input-value="requestParams.personName"
              @input-click="handleSelect('personId', 'personName')" />
          </div>
        </div>
        <div class="submitBtn" @click="formOnSubmit">确认</div>
        <!-- 廖 -->
        <div v-if="userInfo && userInfo.kdpersonid === 'ZSIAAAS+EkeA733t'" class="submitBtn" @click="syncData">
          快捷同步数据(先执行)</div>
        <!-- 测试 ZSIAAAMH50KA733t -->
        <!-- <div v-if="userInfo && userInfo.kdpersonid === 'ZSIAAAMH50KA733t' " class="submitBtn" @click="syncDataFast">快捷同步数据(先执行)</div> -->
        <div v-if="userInfo && userInfo.kdpersonid === 'ZSIAAAS+EkeA733t'" class="submitBtn" @click="syncData">
          逆解析同步数据(补充同步)</div>
        <!-- <div v-if="userInfo && userInfo.kdpersonid === 'ZSIAAAMH50KA733t' " class="submitBtn" @click="syncData">逆解析同步数据(补充同步)</div> -->
        <div class="tabs-ctn">
          <van-tabs @click="onCityChange" type="card" color="#3975C6">
            <van-tab title-class="tab-title" v-for="{ cityId, name } in cityTabs" :title="name" :key="cityId">

            </van-tab>
          </van-tabs>
        </div>
      </div>
      <div class="timebox">
        <!-- 时间选择 -->
        <van-popup v-model="showPickerDate" position="bottom">
          <van-datetime-picker ref="timePicker" v-model="currentDate" type="date" @cancel="onCancelDate"
            @confirm="onConfirmDate" :formatter="formatter" />
        </van-popup>
        <MultipleSelect :visible="showMultipleVisible" @close="showMultipleVisible = false"
          @multipleSubmit="multipleSubmit" :value="multNames" :list="columns"></MultipleSelect>
      </div>
    </div>
    <!-- <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="地区"
      placeholder="请选择所在地区"
      @click="show = true"
    /> -->
    <!-- <div class="map-ctn">
      <div id="heat-ctn"></div>
    </div> -->
    <div id="heat-ctn" :style="{ height: mapHeight }"></div>
    <!-- <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        :field-names="fieldNames"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup> -->
    <div class="loading" v-if="loading">
      <van-loading size="30px" class="loadbox" color="#fff" text-color="#fff"> 加载中... </van-loading>
      <div class="mask"></div>
    </div>
  </div>
</template>

<script>
import { Notify } from 'vant'
import axios from 'axios'
import qs from 'qs'
import $ from 'jquery'
// import { datas } from '../../utils/data.js'
// import { locations } from '../../utils/location.js'
// import { areas } from '../../utils/area.js'
import { getCookies, getTimeYMD, getLastTimeYMD } from '@/utils/util.js'
import CustomInput from '../../components/CustomInput'
import MultipleSelect from '../../components/MultipleSelect/index.vue'
import sellManageApi from '@/api/sellManageApi'
import accidentLocationApi from '@/api/accidentLocationApi'
import outApi from '@/api/outAPi'
const base_url = process.env.BASE_API
const map_url = process.env.MAP_URL

export default {
  components: {
    CustomInput,
    MultipleSelect
  },
  data() {
    return {
      // cascaderValue: '',
      // fieldNames: {
      //   text: 'value',
      //   value: 'code',
      //   children: 'children',
      // },
      // fieldNames: {
      //   text: 'name',
      //   value: 'id',
      //   children: 'children',
      // },
      // options: areas,
      // show: false,
      // fieldValue: "",
      // params: {
      //   latitude: 24.496074,
      //   longitude: 118.202965,
      // },
      showMultipleVisible: false,
      map: null, // 地图对象
      heat: null, // 热力图对象
      dataList: [],
      columns: [],
      showSelectPicker: false,
      showPickerDate: false,
      currentDate: new Date(),
      requestParams: {
        dateStart: '',//todo
        dateEnd: '',//todo
        brandName: '',
        brandId: '',
        personName: '',
        personId: '',
      },
      brandList: [],
      empList: [],
      cityTabs: [
        {
          cityId: 0,
          name: "全部",
          ctn: 'heat-ctn',
          // lat: 35,
          // lng: 103,
          lat: 31.230525,
          lng: 121.473667,
          zoom: 1
        },
        {
          cityId: 1,
          name: "厦门市",
          ctn: 'xm-ctn',
          lat: 24.479627,
          lng: 118.08891,
          zoom: 9.5
        },
        {
          cityId: 2,
          name: "福州市",
          ctn: 'fz-ctn',
          lat: 26.074286,
          lng: 119.296411,
          zoom: 8
        },
        {
          cityId: 3,
          name: "泉州市",
          ctn: 'qz-ctn',
          lat: 24.874452,
          lng: 118.675724,
          zoom: 9
        },
        {
          cityId: 4,
          name: "莆田市",
          ctn: 'pt-ctn',
          lat: 25.454202,
          lng: 119.007662,
          zoom: 9
        },
        {
          cityId: 5,
          name: "昆明市",
          ctn: 'km-ctn',
          lat: 24.88149,
          lng: 102.833669,
          zoom: 7
        },
        {
          cityId: 6,
          name: "西安市",
          ctn: 'xa-ctn',
          lat: 34.343207,
          lng: 108.939645,
          zoom: 8
        },
      ],
      mapHeight: '100%',
      loading: false,
      multNames: '', // 多选默认值
      userInfo: JSON.parse(getCookies('userInfo')),
    }
  },
  async mounted() {
    // console.log('location:', locations);
    // this.getLocation()
    // this.render()
    this.initDateTime()
    this.getBrandList()
    this.getAccidentOrgPsnList()
    const searchRef = this.$refs.searchRef
    // console.log('searchRef', searchRef.clientHeight);
    // console.log('searchRef', document.documentElement.clientHeight);
    this.mapHeight = (document.documentElement.clientHeight - searchRef.clientHeight - 10) + 'px'
    this.map = await this.initMap()
    // this.initData()

  },
  methods: {
    // 服务端快捷解析同步数据
    async syncDataFast() {
      this.loading = true
      const res = await accidentLocationApi.syncBatch()
      console.log('syncDataFast res:', res);
      this.loading = false
    },
    // 客户端逆解析同步数据
    async syncData() {
      this.loading = true
      let res = await accidentLocationApi.getNeedSyncList()
      if (res && res.length > 0) {
        Notify({ type: 'warning', message: res.length + '条记录待同步' })
        // console.log('resss:', res)
        // res.forEach(async item => {
        //   this.formatMap(item)
        // });
        // this.formatMap(res[0])
        // setInterval(() => {
        //   this.formatMap(res[0])
        // }, 1000);
        let i = 0
        const intervalId = setInterval(() => {
          this.formatMap(res[i])
          i += 1
          if (i >= res.length) {
            Notify({ type: 'success', message: '同步完成' })
            clearInterval(intervalId);
          }
        }, 300); // 200毫秒，少部分会逆解析失败，同步完需要再同步一下，或者用300毫秒
      } else {
        Notify({ type: 'success', message: '没有可同步数据' })
      }
      this.loading = false
    },
    getLastMonth(date) {
      // 减一月
      // let lastMonth = date.setMonth(date.getMonth() - 1)
      const lastMonthDate = new Date(date.setMonth(date.getMonth() - 1))
      // console.log('lastmonth:', lastMonth)
      return lastMonthDate.getFullYear() + '-' + (lastMonthDate.getMonth() + 1) + '-' + lastMonthDate.getDate()
    },

    async formOnSubmit() {
      const heatData = await this.initData()
      // console.log('heat:', heatData);
      this.heat.setData(heatData)
    },
    onCityChange(cityId) {
      if (!this.map) {
        return
      }
      // if (cityId === 0) {
      //   this.heat.setMax(400)
      // } else {
      //   this.heat.setMax(400)
      // }
      // this.heat.setMax(cityId === 0 ? 400 : 50)
      // console.log('e:', cityId)
      let { lat, lng, zoom } = this.cityTabs.filter(e => e.cityId === cityId)[0]
      // console.log(lat, lng, zoom);

      zoom = 10 // 这个级别刚好会显示市的名称
      // this.map = null
      // this.map = this.initMap(24.479627, 118.08891, 5)
      // this.initMap(24.479627, 118.08891, 5)
      this.map.setZoom(cityId === 0 ? 4 : zoom)
      var center = new TMap.LatLng(lat, lng);
      this.map.setCenter(center)

    },
    // 获取品牌
    getBrandList() {
      sellManageApi
        .secondHandCarFacade({
          method: 'getShowOrgByUser',
          orgKey: 'brandAll',
        })
        .then((res) => {
          if (res.code == 1) {
            this.brandList = res.data
          }
        })
    },
    // 外服人员
    getAccidentOrgPsnList() {
      outApi.getAccidentOrgPsnList({}).then((res) => {
        if (res.data) {
          this.empList = res.data
        }
      })
    },
    // 选择下拉
    handleSelect(field, fieldName) {
      this.multNames = this.requestParams[fieldName]
      this.columns = field == 'personId' ? this.empList : this.brandList
      this.field = field
      this.fieldName = fieldName
      this.showMultipleVisible = true
    },
    // 多选确认
    multipleSubmit(data) {
      if (data && data.length != 0) {
        this.requestParams[this.fieldName] = data.map((item) => item.name).join(',')
        this.requestParams[this.field] = data.map((item) => item.billId).join(',')
      } else {
        this.requestParams[this.fieldName] = ''
        this.requestParams[this.field] = ''
      }
    },
    onCancelDate() {
      this.showPickerDate = false
    },
    initData() {
      return new Promise(async (resolve, reject) => {
        this.loading = true
        let res = await accidentLocationApi.getList(this.requestParams)
        this.loading = false
        // res = res.map(e => {
        //   e.count = 100
        //   return e
        // })
        // if (!res || !res.success) {
        //   res = []
        //   Notify({ type: 'danger', message: '系统问题，请联系管理员' })
        // }
        resolve(res)
      })
      // accidentLocationApi.getListByAddress().then(res => {
      //   this.dataList = res.data
      // })
    },
    // 时间筛选
    handleSelectTime(field) {
      const now = new Date()
      this.currentDate = field === 'dateStart' ? new Date(this.currentDate.setMonth(this.currentDate.getMonth() - 1)) : this.currentDate
      this.timeField = field
      this.showPickerDate = true
      // 设置默认值
      if (this.$refs.timePicker) {
        const picker = this.$refs.timePicker.getPicker()
        const { dateStart, dateEnd } = this.requestParams
        const date = field === 'dateStart' ? dateStart : dateEnd
        const dates = date.split('-')
        picker.setValues([dates[0] + '年', dates[1] + '月', dates[2] + '日'])
      }
    },
    // 时间确认
    onConfirmDate() {
      const newValue = Number.parseInt('' + this.value1 + this.value2 + this.value3)
      console.log('newValue')
      console.log(newValue)
      console.log('start')
      const start = Number.parseInt(this.requestParams.dateStart.replaceAll('-', ''))
      console.log(start)
      const end = Number.parseInt(this.requestParams.dateEnd.replaceAll('-', ''))
      console.log('start')
      console.log(end)
      if (this.timeField === 'dateStart' && newValue > end) {
        Notify({ type: 'danger', message: '开始时间不能大于结束时间' })
        return
      }
      if (this.timeField === 'dateEnd' && newValue < start) {
        Notify({ type: 'danger', message: '结束时间不能小于开始时间' })
        return
      }

      this.requestParams[this.timeField] = `${this.value1}-${this.value2}-${this.value3}` // 字符串拼接 结果入2020-07-03
      this.onCancelDate()
      // this.initData()
    },
    formatter(type, value) {
      if (type === 'year') {
        this.value1 = value // 可以拿到当前点击的数值
        return `${value}年`
      } else if (type === 'month') {
        this.value2 = value
        return `${value}月`
      }
      this.value3 = value
      return `${value}日`
    },
    // getLocation() {
    //   const [ provinces, cities, districts ] = locations.result
    //   let provinceList = provinces.map(e => {
    //     const provinceId = e.id.substr(0, 2)
    //     const newCityList = cities.map(item => {
    //       const cityId = item.id.substr(0, 4)
    //       const districtList = districts.filter(ele => ele.id.startsWith(cityId))
    //       item.children = districtList
    //       return item
    //     })
    //     const cityList = newCityList.filter(item => item.id.startsWith(provinceId))


    //     e.children = cityList

    //     return e
    //   })

    //   provinceList = provinceList.map(e => {
    //     const specialCitys = ['北京', '上海', '天津', '重庆', '香港', '澳门']

    //     if (specialCitys.includes(e.name)) {

    //       if (e.name === '香港' || e.name === '澳门') {
    //         // let city = { ...e }
    //         // city = city.children.map(item => {
    //         //   const district = {
    //         //     fullname: item.fullname,
    //         //     id: item.id,
    //         //     location: item.location,
    //         //     name: item.name,
    //         //     pinyin: item.pinyin
    //         //   }
    //         //   return district
    //         // })
    //         // e.children = [city]
    //       //   const city = e.children[0]
    //       //   const district = {
    //       //     fullname: city.fullname,
    //       //     id: city.id,
    //       //     location: city.location,
    //       //     name: city.name,
    //       //     pinyin: city.pinyin
    //       //   }

    //       //   city.children = [district]
    //       //   e.children = [city]
    //       // }
    //       } else {
    //         const citys = e.children
    //         const first = citys[0]
    //         first.children = citys.slice(1).map(ele => {
    //           const item = {
    //             fullname: ele.fullname,
    //             id: ele.id,
    //             location: ele.location,
    //             name: ele.name,
    //             pinyin: ele.pinyin
    //           }
    //           return item
    //         })
    //         e.children = [first]
    //       }
    //     }
    //     return e
    //   })

    //   provinceList = provinceList.map(e => {
    //     const specialCitys = ['北京', '上海', '天津', '重庆', '香港', '澳门']

    //     if (specialCitys.includes(e.name)) {

    //       if (e.name === '香港' || e.name === '澳门') {
    //         let city = { ...e }
    //         city = city.children.map(item => {
    //           const district = {
    //             fullname: item.fullname,
    //             id: item.id,
    //             location: item.location,
    //             name: item.name,
    //             pinyin: item.pinyin
    //           }
    //           return district
    //         })
    //         e.children = [city]
    //       //   const city = e.children[0]
    //       //   const district = {
    //       //     fullname: city.fullname,
    //       //     id: city.id,
    //       //     location: city.location,
    //       //     name: city.name,
    //       //     pinyin: city.pinyin
    //       //   }

    //       //   city.children = [district]
    //       //   e.children = [city]
    //       // }
    //       } else {
    //         // const citys = e.children
    //         // const first = citys[0]
    //         // first.children = citys.slice(1).map(ele => {
    //         //   const item = {
    //         //     fullname: ele.fullname,
    //         //     id: ele.id,
    //         //     location: ele.location,
    //         //     name: ele.name,
    //         //     pinyin: ele.pinyin
    //         //   }
    //         //   return item
    //         // })
    //         // e.children = [first]
    //       }
    //     }
    //     return e
    //   })

    //   this.options = provinceList

    //   console.log('pro:', provinceList);
    // },
    render() {
      this.jsdkConfig()
      // 先获取当前地理位置，
      // this.getlocation()
      // 然后查询热力图数据
      this.getData()
      // 最好渲染热力图
      // this.initMap()
    },
    getData() {

    },
    // onFinish(event) {
    //   console.log('event:', event);
    //   const [province, city, district] = event.selectedOptions
    //   console.log(province, city, district);
    //   this.fieldValue = province.fullname + city.fullname + district.fullname
    //   this.params.address = province.fullname + "," + city.fullname + "," + district.fullname
    //   this.show = false
    // },
    // async initMap(lat = 35, lng = 103, zoom = 5) {
    async initMap(lat = 34.266611, lng = 108.953939, zoom = 4) {
      // lat = 35
      // lng = 103
      var center = new TMap.LatLng(lat, lng);

      //初始化地图
      var map = new TMap.Map("heat-ctn", {
        zoom: zoom,//设置地图缩放级别
        center: center,//设置地图中心点坐标
        // mapStyleId: "style4" ,//个性化样式
        //   baseMap: {
        //   type: "vector",
        //   features: ["base", "building3d"], // 隐藏矢量文字
        // },
      });
      //初始化热力图并添加至map图层
      var heat = new TMap.visualization.Heat({
        max: 10, // 热力最强阈值
        min: 0, // 热力最弱阈值
        height: 0, // 峰值高度
        // opacity: 0.2,
        gradientColor: { // 渐变颜色
          // 0.1: "#673198",
          // 0.6: "#00FF7F",
          // 0.9: "#ff3900",
          // 0.2: "#673198",
          // 0.4: "#00ff00",
          // 0.9: "#ff3900",

          // 0.2: "#673198",
          // 0.4: "#7CFC00",
          // 0.9: "#ff3900",

          0.3: "#9999ff",
          0.6: "#7CFC00",
          0.9: "#ff3900",
        },
        radius: 10 // 最大辐射半径

      }).addTo(map);
      const heatData = await this.initData()
      // console.log('heatdata:', heatData);

      heat.setData(heatData);//设置数据
      this.heat = heat
      return map
    },
    // 地图获取
    jsdkConfig() {
      let vm = this
      axios({
        url: `${base_url}/proxy/qywx/jsdkConfig`,
        method: 'post',
        data: qs.stringify(
          // { url: 'http://bkt.autocnd.com' },
          { url: location.href.split('#')[0] },
          { encode: false }
        ),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          satoken: getCookies('token'),
        },
      }).then((res) => {
        console.log('jsdkConfig:', res)
        let jsdk = res.data.data
        localStorage.setItem('jsdk', JSON.stringify(res.data.data))
        wx.config({
          beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: jsdk.corpid, // 必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用
          timestamp: jsdk.timestamp, // 必填，生成签名的时间戳
          nonceStr: jsdk.nonceStr, // 必填，生成签名的随机串
          signature: jsdk.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
          jsApiList: ['openLocation', 'getLocation', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
        })
        wx.ready(function (res) {
          wx.checkJsApi({
            jsApiList: ['openLocation', 'getLocation', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function (res) {
              console.log(res, '成功')
              wx.getLocation({
                type: 'gcj02',
                success: function ({ latitude, longitude }) {
                  console.log('获取用户位置信息成功：', res)
                  // vm.params.latitude = latitude // 纬度
                  // vm.params.longitude = longitude // 纬度
                  // vm.initMap(latitude, longitude)
                  // vm.formatMap(latitude, longitude)
                },
                fail: function (res) {
                  console.log('获取用户位置信息失败！', res)
                },
              })
            },
            fail(err) {
              console.log(err, '失败')
            },
            complete(opt) {
              console.log(opt, '完成')
            },
          })
        })
      })
    },
    // 逆解析
    formatMap(item) {
      const lat = item.latitude
      const lng = item.longitude
      let vm = this
      var data = {
        // location: "24.48405,118.03394",
        location: `${lat},${lng}`,
        /*换成自己申请的key*/
        key: '4HEBZ-22MKH-OTBDM-WPN3E-HFCA2-ALB4C',
        get_poi: 0,
      }
      var url = map_url
      data.output = 'jsonp'

      $.ajax({
        type: 'get',
        dataType: 'jsonp',
        data: data,
        jsonp: 'callback',
        jsonpCallback: 'QQmap',
        url: url,
        success: function (json) {
          // console.log('腾讯地图逆解析的地址：', json)
          // console.log('腾讯地图逆解析的地址：', json.result)
          // console.log('腾讯地图逆解析的地址：', json.result.address_component)
          const { province, city, district } = json.result.address_component
          const { adcode } = json.result.ad_info
          const provinceCode = adcode.substr(0, 2) + "0000"
          const cityCode = adcode.substr(0, 4) + "00"
          // console.log(provinceCode, cityCode, adcode);
          vm.fieldValue = province + city + district
          vm.cascaderValue = province + city + district
          const timeStr = item.createTime.replace(/:|\s|-|\./g, '')
          const billId = item.billId
          item = {
            id: billId + timeStr,
            billId,
            latitude: item.latitude,
            longitude: item.longitude,
            province,
            city,
            district,
            accidentAddress: json.result.address
          }
          accidentLocationApi.syncNew(item)
          // if (json && json.result) {
          //   vm.params.accidentAddress = json.result.address
          // }
        },
      })
    },
    initDateTime() {

      let startDate
      var time = new Date();

      var year = time.getFullYear();
      var month = time.getMonth();
      var day = time.getDate();
      if (month==0) {
        startDate = (year-1)+'-12-01'
      } else {
        startDate = year+'-'+month.toString().padStart(2, '0')+'-01'
      }
      this.requestParams.dateStart = startDate
      this.requestParams.dateEnd = year+'-'+(month+1).toString().padStart(2, '0')+'-'+day.toString().padStart(2, '0')
    }
  }
}
</script>

<style lang="less" scoped>
.search_content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;

  .top_title {
    position: relative;
    width: 100%;
    height: 50px;
    background: url(../../assets/images/title_bg.png) no-repeat;
    background-size: 100%;
    background-attachment: fixed;

    .top_title_back {
      position: absolute;
      left: 10px;
      line-height: 50px;
      color: #fff;
      font-size: 16px;
    }

    .top_title_val {
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
    }

    .top_title_right {
      position: absolute;
      right: 10px;
      top: 0;
      line-height: 50px;
      color: #fff;
      font-size: 16px;
    }
  }
}

.heat-container {
  background-color: #F5F5FA;
  min-height: 100vh;
  padding-top: 55px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .search {
    .time-ctn {
      // background-color: #ffffff;
      padding: 3px 6px 3px 16px;
      color: #646566;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .label {
        display: inline-block;
        width: 60px;
        font-weight: bold;
      }

      .range-ctn {
        // flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 300px;
      }
    }

    .submitBtn {
      background: #409eff;
      color: #fff;
      width: 75%;
      margin: auto;
      text-align: center;
      padding: 0.15rem;
      border-radius: 5px;
      margin-top: 0.1rem;
      margin-bottom: 0.2rem;
      font-size: 0.3rem;
    }

    .tabs-ctn {
      padding: 10px 0;
    }
  }

  // .map-ctn {
  //   flex: 1;
  //   #heat-ctn {
  //     width: 100%;
  //     // height: 300px;
  //     height: 100%;
  //     // flex: 1;
  //   }
  // }
  #heat-ctn {
    width: 100%;
    // height: 500px;
    height: 100%;
    // flex: 1;
  }

  .loading {
    z-index: 1002;
  }

}
</style>
<style>
.van-tab.tab-title {
  padding: 0 1px;
}
</style>
